<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选择用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cba/style.css/}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cba/my.css/}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cba/formSelects-v4.css/}" media="all">

    <style>
        .suggest:hover {
            background-color: deepskyblue;
        }
    </style>

</head>
<body class="childrenBody">

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li th:each="l,stat:${list}" th:class="${stat.first?'layui-this':''}" th:text="${l.name}"></li>
    </ul>
    <div class="layui-tab-content">
        <div th:each="l,stat:${list}" th:data="${l.sku}"
             th:class="${stat.first?'layui-tab-item layui-show':'layui-tab-item'}">
            <textarea class="layui-textarea" placeholder="输入多个变体值，逗号分隔" th:text="${l.selectVals}"></textarea>
            <hr/>
            <button th:each="d:${l.list}" class="layui-btn layui-btn-primary layui-btn-sm suggest" th:text="${d.key}"
                    th:data="${d.value}"></button>
        </div>
        <div class="layui-tab-item">2</div>
    </div>

</div>

<script th:src="@{/js/layui/layui.js}"></script>
<script th:src="@{/js/cba/login-timeout.js}"></script>
<script th:src="@{/js/vip/vip_comm.js}"></script>
<script th:src="@{/js/cba/my.js}"></script>
<!--<script th:src="@{/js/cba/multiple.js}"></script>-->
<script th:src="@{/js/cba/formSelects-v4.js}"></script>
<!--<script type="text/javascript" src="js/newsadd.js"></script>-->
<script type="text/javascript" th:inline="javascript">
    layui.use(['table', 'form', "layer", "element"], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , $ = layui.jquery
            , element = layui.element;


        element.on('tab(docDemoTabBrief)', function (data) {
            console.log(data.elem)
        });

        //添加推荐
        $(".suggest").click(function () {
            var data = $(this).attr("data");
            var content = $(".layui-show textarea").val();
            var arr = content.split(",");
            if (arr != null && arr.indexOf(data) > -1) {
                return;
            }

            content = isNotNullOrEmpty(content) ? (content + "," + data) : data;
            $(".layui-show textarea").val(content)

        })

        //监听提交
        form.on('submit(saveContainer)', function (data) {

            var arr = [];
            $(".layui-form-checked").each(function (i, val) {
                arr.push($(val).prev().val());
            });

            if (arr.length === 0) {
                layer.msg('请选择需要授权的！', {icon: 7});
                return false;
            }

            $.ajax({
                url: [[${basePath}]] + "/product/auth/save",
                data: {productIds: [[${ids}]], toUserIds: arr.join(","), productType: 1},
                type: "post",
                success: function (data) {
                    if (data.success) {
                        layer.msg(data.msg, {icon: 1});
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index);

                            var pIndex = parent.parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.parent.layer.close(pIndex);
                        }, 1500);
                    } else {
                        layer.msg(data.msg, {icon: 5});
                    }
                }
            });

            return false;
        });

    });
</script>
</body>
</html>